<template>
  <div v-loading="loading" class="home-container" ref="container" @wheel="handleWheel">
    <ul class="carousel-container" :style="{ marginTop }" @transitionend="handleTransitionEnd">
      <li v-for="item in data" :key="item.id">
        <CarouselItem :carousel="item" />
      </li>
    </ul>

    <div v-show="index >= 1" class="icon icon-up" @click="switchTo(index - 1)">
      <Icon type="arrowUp" />
    </div>
    <div v-show="index < data.length - 1" class="icon icon-down" @click="switchTo(index + 1)">
      <Icon type="arrowDown" />
    </div>

    <ul class="indicator">
      <li :class="{ active: i === index }" v-for="(item, i) in data" :key="item.id" @click="switchTo(i)"></li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import CarouselItem from './components/CarouselItem';
import Icon from '@/components/Icon';

export default {
  components: {
    CarouselItem,
    Icon
  },
  data() {
    return {
      index: 0, // 当前显示的轮播图
      containerHeight: 0, //整个容器的高度
      switching: false //是否正在滚动
    };
  },
  computed: {
    marginTop() {
      return -this.index * this.containerHeight + 'px';
    },
    ...mapState('banner', ['loading', 'data'])
  },

  created() {
    this.$store.dispatch('banner/fetchBanner');
  },
  mounted() {
    this.containerHeight = this.$refs.container.clientHeight;
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    switchTo(i) {
      this.index = i;
    },
    handleWheel(e) {
      if (this.switching) return;
      if (e.deltaY < -5 && this.index > 0) {
        this.switching = true;
        this.index--;
      } else if (e.deltaY > 5 && this.index < this.data.length - 1) {
        this.switching = true;
        this.index++;
      }
    },
    handleTransitionEnd() {
      this.switching = false;
    },
    handleResize() {
      this.containerHeight = this.$refs.container.clientHeight;
    }
  }
};
</script>

<style lang="less" scoped>
@import '@/styles/mixin.less';
@import '@/styles/var.less';
.home-container {
  width: 100%;
  height: 100%;
  position: relative;
  // 开启BFC解决外边距合并问题
  overflow: hidden;
  // 去除默认样式
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .icon {
    .self-center();
    font-size: 30px;
    color: @gray;
    cursor: pointer;
    transform: translateX(-50%);
    @gap: 25px;
    &.icon-up {
      top: @gap;
      animation: jump-up 2s infinite;
    }
    &.icon-down {
      top: auto;
      bottom: @gap;
      animation: jump-down 2s infinite;
    }

    @jump: 5px;
    @keyframes jump-up {
      0% {
        transform: translate(-50%, @jump);
      }
      50% {
        transform: translate(-50%, -@jump);
      }
      100% {
        transform: translate(-50%, @jump);
      }
    }
    @keyframes jump-down {
      0% {
        transform: translate(-50%, -@jump);
      }
      50% {
        transform: translate(-50%, @jump);
      }
      100% {
        transform: translate(-50%, -@jump);
      }
    }
  }
}

.carousel-container {
  width: 100%;
  height: 100%;
  transition: 500ms;
  li {
    width: 100%;
    height: 100%;
  }
}

.indicator {
  .self-center();
  transform: translateY(-50%);
  left: auto;
  right: 25px;
  li {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: @words;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #fff;
    box-sizing: border-box;
    transform: 0.5s;
    &.active {
      background-color: #fff;
    }
  }
}
</style>
